// 横向靠左，竖向:靠上、居中、靠下、stretch、baseline
.flx     { display: flex; }
.flx-lm  { display: flex; align-items: center }
.flx-lb  { display: flex; align-items: flex-end }
.flx-ls  { display: flex; align-items: stretch }
.flx-ll  { display: flex; align-items: baseline }
// 横向居中，竖向:靠上、居中、靠下
.flx-mt  { display: flex; justify-content: center; }
.flx-mm  { display: flex; justify-content: center; align-items: center; }
.flx-mb  { display: flex; justify-content: center; align-items: flex-end; }
.flx-ms  { display: flex; justify-content: center; align-items: stretch; }
.flx-ml  { display: flex; justify-content: center; align-items: baseline; }
// 横向靠右，竖向:靠上、居中、靠下
.flx-rt  { display: flex; justify-content: flex-end; }
.flx-rm  { display: flex; justify-content: flex-end; align-items: center; }
.flx-rb  { display: flex; justify-content: flex-end; align-items: flex-end; }
.flx-rs  { display: flex; justify-content: flex-end; align-items: stretch; }
.flx-rl  { display: flex; justify-content: flex-end; align-items: baseline; }
// 横向两边，竖向:靠上、居中、靠下
.flx-bt  { display: flex; justify-content: space-between; }
.flx-bm  { display: flex; justify-content: space-between; align-items: center;}
.flx-bb  { display: flex; justify-content: space-between; align-items: flex-end;}
.flx-bs  { display: flex; justify-content: space-between; align-items: stretch;}
.flx-bl  { display: flex; justify-content: space-between; align-items: baseline;}
// 横向等分，竖向:靠上、居中、靠下
.flx-at  { display: flex; justify-content: space-around; }
.flx-am  { display: flex; justify-content: space-around; align-items: center;}
.flx-ab  { display: flex; justify-content: space-around; align-items: flex-end;}
.flx-as  { display: flex; justify-content: space-around; align-items: stretch;}
.flx-al  { display: flex; justify-content: space-around; align-items: baseline;}
// 横向等分，竖向:靠上、居中、靠下
.flx-et  { display: flex; justify-content: space-evenly; }
.flx-em  { display: flex; justify-content: space-evenly; align-items: center;}
.flx-eb  { display: flex; justify-content: space-evenly; align-items: flex-end;}
.flx-es  { display: flex; justify-content: space-evenly; align-items: stretch;}
.flx-el  { display: flex; justify-content: space-evenly; align-items: baseline;}

.flx-d-c   { flex-direction: column; }
.flx-d-rw  { flex-direction: row-reverse; }
.flx-d-cw  { flex-direction: column-reverse; }

.flx-w-w  { flex-wrap: wrap; }
.flx-w-r  { flex-wrap: wrap-reverse; }

.flx-g-1	{ flex-grow: 1; }
.flx-g-2	{ flex-grow: 2; }
.flx-g-3	{ flex-grow: 3; }
.flx-g-4	{ flex-grow: 4; }
.flx-g-5	{ flex-grow: 5; }
.flx-g-6	{ flex-grow: 6; }
.flx-g-7	{ flex-grow: 7; }
.flx-g-8	{ flex-grow: 8; }
.flx-g-9	{ flex-grow: 9; }
.flx-g-10	{ flex-grow: 10; }

.flx-s-0  { flex-shrink: 0; }

.flx-b-0p { flex-basis: 0%; }

.flx-ac-s   { align-content: flex-start; }
.flx-ac-c   { align-content: flex-center; }
.flx-ac-e   { align-content: flex-end; }
.flx-ac-b   { align-content: space-between; }
.flx-ac-a   { align-content: space-around; }
.flx-ac-ev  { align-content: space-evenly; }

.flx-as-s     { align-self: flex-start}
.flx-as-c     { align-self: center}
.flx-as-e     { align-self: flex-end}
.flx-as-b     { align-self: baseline}
.flx-as-st     { align-self: stretch}
